<template>
  <el-transfer
    v-if="roles != null"
    :model-value="modelValue"
    @update:modelValue="$emit('update:modelValue', $event)"
    :titles="['未授权角色', '已授权角色']"
    :props="{
      key: 'id',
      label: 'name'
    }"
    :data="roles"
  />
</template>
<script>
import { fetchAll } from '@/api/system/role'

export default {
  name: 'RoleConfigTransfer',
  props: {
    modelValue: {}
  },
  data () {
    return {
      // 角色列表
      roles: null
    }
  },
  methods: {
    // 查询数据
    fetchData () {
      fetchAll()
        .then(records => {
          this.roles = records
        })
        .catch(e => {
          this.$tip.apiFailed(e)
        })
    }
  },
  created () {
    this.fetchData()
  }
}
</script>
<style scoped lang="scss">
.el-transfer {
  display: flex;
  :deep(.el-transfer__buttons) {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  :deep(.el-transfer-panel) {
    flex: 1;
  }
}
</style>
